<template>
  <view class="ssss">
    <!-- 组件 -->
    <u-popup :show="obtain" mode="center">
      <obtain
        :boxthedata="openlist"
        @CloseWindows="CloseWindows"
        @closeshow="closeshow"
      ></obtain>
    </u-popup>
    <u-popup :show="shipping" mode="center">
      <shipping
        :boxthedata="openlist"
        :value="value"
        @leavesite="leavesite"
      ></shipping>
    </u-popup>

    <!-- 发货 -->
    <u-popup :show="delivergoods" mode="center">
      <delivergoods
        :value="value"
        @closedelivergoods="closedelivergoods"
      ></delivergoods>
    </u-popup>

    <!-- 收货 -->
    <u-popup :show="consignee" mode="center">
      <consignee :value="value" @awaitgoods="awaitgoods"></consignee>
    </u-popup>

    <u-overlay :show="examine">
      <examine @examineprize="examineprize" :value="value"></examine>
    </u-overlay>
    <!-- 导航栏 -->
    <!-- <view class="navigation">
      <u-navbar
        :titleStyle="{ fontSize: '40rpx' }"
        title="我的盲盒"
        leftIconSize="50rpx"
        :fixed="false"
        @rightClick="rightClick"
        @leftClick="leftClick"
      >
      </u-navbar>
    </view> -->

    <!-- 主体 -->
    <!--view class="content" v-if="boxlist.length > 0"></view-->
      <u-row customStyle="flex-wrap: wrap;margin: 40rpx 0 0 0;" gutter="15" v-if="boxlist.length > 0">
        <u-col span="4" v-for="(item, index) in boxlist" :key="index">
          <view
            class="boxes"
            @click="show(item)"
          >
            <view class="time">{{ item.createAt | Filter_thedata }}</view>
            <view class="smoke">{{ item.source }}</view>
            <view class="boxes_box">
              <image v-if="item.state == 'open'" src="/static/box01.png" alt="" />
              <image v-else :src="item.productImg" alt="" />
            </view>
            <view
              v-if="item.state === 'open'"
              class="clickbox"
              @click="btnok(item, index)"
            >
              点击拆盒
            </view>
            <view v-else class="productname">{{ item.productName }}</view>
          </view>
        </u-col>
      </u-row>
    <u-empty
        mode="data"
        width="400rpx"
        height="400rpx"
        icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
        class="empty"
        textSize="36rpx"
        v-else
    >
    </u-empty>
    <view class="toload" v-if="jiazai">
      <view class="border border_left"></view>
      <u-loading-icon></u-loading-icon>
      <view class="loading"> 拼命加载中...</view>
      <view class="border border_right"></view>
    </view>
    <view class="toload" v-if="load">
      <view class="border border_left"></view>
      <view class="loading"> 没有更多了</view>
      <view class="border border_right"></view>
    </view>
  </view>
</template>

<script>
import { getdownthelist } from "@/config/api";
import { getOpeningthebox } from "@/config/api-java";
import obtain from "../components/obtain/index.vue";
import shipping from "../components/shipping/index.vue";
import delivergoods from "./components/delivergoods/index.vue";
import consignee from "./components/consignee/index.vue";
import examine from "../components/examine/index.vue";
import { parseTime } from "../../../untils/index";
export default {
  components: {
    obtain,
    shipping,
    delivergoods,
    consignee,
    examine,
  },

  data() {
    return {
      list: [],
      obtain: false,
      shipping: false,
      delivergoods: false, // 发货组件
      consignee: false, //收货组件
      examine: false, // 再次查看商品
      openlist: {}, //开盒后的数据
      value: {}, // 每次被点击的数据
      jiazai: false,
      load: false,
      paging: {
        page: 1,
        list_rows: 18,
      },
      total: 0, // 数据总条数
    };
  },
  computed: {
    boxlist() {
      return this.list;
    },
  },
  async onShow() {
    this.shipping = false;
    this.delivergoods = false;
    this.consignee = false;
    this.paging.page = 1;
    this.list = [];
    await this.getseparation();
  },
  methods: {
    examineprize() {
      this.examine = false;
    },
    awaitgoods() {
      this.consignee = false;
    },
    show(value) {
      console.log(107, value);
      // 通过判断打开发货弹窗
      if (value.productType === "shop" && value.state === "ship") {
        this.openlist = {};
        this.delivergoods = true;
        this.value = value;
        return;
      }

      // 通过判断打开收货弹窗
      if (value.productType === "shop" && value.state === "complete") {
        this.consignee = true;

        this.value = value;
        return;
      }

      /*if (value.productType === "nft") {
         this.value = value;
         this.examine = true;
         return
       }*/

      if (value.productType === "shop" && value.state === "confirm") {
        this.value = value;
        setTimeout(() => {
          this.shipping = true;
        }, 100);
      }
    },
    // 关闭等待发货弹窗
    closedelivergoods() {
      this.delivergoods = false;
    },
    closeshow() {
      this.obtain = false;
    },
    // 封装请求数据接口
    async getseparation() {
      let res = await getdownthelist(this.paging);
      let list = res.items.map((item) => {
        if (item.source === "point") {
          return { ...item, source: "消耗" + Number(item.costPoint) + "金豆" };
        }
        if (item.source === "time") {
          return { ...item, source: "免费抽盒" };
        }
      });

      this.list = [...this.list, ...list];
      this.total = res.total;
    },
    leavesite() {
      this.getseparation();
      this.shipping = false;
    },
    CloseWindows() {
      this.obtain = false;
      this.shipping = true;
    },
    async btnok(item, k) {
      let res = await getOpeningthebox({ detailId: item.id });

      this.openlist = res;
      if (this.openlist.productType === "shop") {
        this.shipping = true;
      } else {
        this.obtain = true;
      }

      var lists = JSON.parse(JSON.stringify(this.list));
      let list = {};

      if (res.source === "time") {
        list = { ...res, source: "免费抽盒" };
      }
      if (res.source === "point") {
        list = { ...res, source: `消耗${res.costPoint}金豆` };
      }
      lists[k] = list;

      this.list = lists;
    },
  },
  filters: {
    Filter_thedata(value) {
      return parseTime(value, "{m}.{d} {h}:{i}:{s}");
    },
  },
  // 滚动条触底事件
  onReachBottom() {
    console.log(123);
    this.jiazai = true;
    // 页码加加
    if (this.list.length >= this.total) {
      console.log("没有下一页了");
      uni.showToast({
        title: "没有更多了",
        icon: "none",
      });
      this.jiazai = false;
      this.load = true;
      return;
    }
    this.paging.page++;
    this.getseparation();
  }
};
</script>

<style lang="scss" scoped>
.ssss {
  background-color: #f9f9f9;
}
.navigation {
  margin-top: 55rpx;
}
.content:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
}

.content {
  text-align: center;
  width: 750 rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 40 rpx;
}
  .boxes {
    // float: left;
    width: 240rpx;
    height: 436rpx;

    background-color: #fff;
    margin: 16rpx auto 0 auto;

    .time {
      // width: 192rpx;
      height: 37rpx;
      font-size: 28rpx;
      color: #000000;
      font-weight: 700;
      margin: 36rpx auto 0 auto;
      text-align: center;
    }
    .smoke {
      // width: 125rpx;
      height: 33rpx;
      font-size: 24rpx;
      color: #4a4a4a;
      text-align: center;
      margin: 14rpx 0 20rpx 0;
    }
    .boxes_box {
      width: 200rpx;
      height: 200rpx;
      //   background-color: pink;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .clickbox {
      text-align: center;
      width: 164rpx;
      height: 47rpx;
      font-size: 24rpx;
      color: #4e7ee9;
      line-height: 47rpx;
      border-radius: 23.5rpx;
      border: 1px solid #4e7ee9;
      //   background-color: pink;
      margin: 24rpx auto 0 auto;
    }
  }
.productname {
  // width: 164rpx;
  height: 47rpx;
  font-size: 24rpx;
  color: #f4a31b;
  line-height: 47rpx;
  border-radius: 23.5rpx;
  // border: 1px solid #4e7ee9;
  //   background-color: pink;
  margin: 24rpx auto 0 auto;
  text-align: center;
}
.toload {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  margin-top: 30rpx;
  .border {
    width: 100rpx;
    border-top: 1rpx solid #b4b4b4;
  }
  .border_left {
    margin-right: 40rpx;
  }
  .border_right {
    margin-left: 40rpx;
  }
  .loading {
    margin-left: 10rpx;
  }
}
.empty {
  padding-top: 150rpx;
}
</style>
